<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>04_案例练习-奇数偶数行变色</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <td>name</td>
                <td>age</td>
            </tr>

            <tr>
                <td>
                    zhangsan
                </td>

                <td>
                    18
                </td>
            </tr>

            <tr>
                <td>
                    zhangsan
                </td>

                <td>
                    18
                </td>
            </tr>

            <tr>
                <td>
                    zhangsan
                </td>

                <td>
                    18
                </td>
            </tr>


            <tr>
                <td>
                    zhangsan
                </td>

                <td>
                    18
                </td>
            </tr>

            <tr>
                <td>
                    zhangsan
                </td>

                <td>
                    18
                </td>
            </tr>
        </table>


        <script>
            var tr_list = document.querySelectorAll('table > tbody > tr');

            for(var i = 0; i < tr_list.length; i++){
                if(i % 2 == 0) {
                    tr_list[i].style.backgroundColor = 'skyblue';
                }else{
                    tr_list[i].style.backgroundColor = 'yellowgreen';
                }
            }
        </script>
    </body>
</html>